/**
* @desc:  通行记录
* @author qiankui
* @date 2023-8-28 14:29:25
*/
<template>
    <div class="page-container h-100">
        <div class="wrapperform m-b-16">
            <div class="searchbox">



                <el-form ref="form"  :inline="true" :model="form" class="demo-form-inline">
                    <!--姓名-->
                    <el-form-item :label="$t('name')">
                        <!--请输入姓名-->
                        <el-input style="width: 240px !important;" class="inputEl" v-model="form.name" :placeholder="$t('Please enter your name')"></el-input>
                    </el-form-item>
                    {{form.zzid}}
                    <!--组织-->
                    <el-form-item label="组织">
                        <el-select v-model="selected" placeholder="请选择" clearable multiple>
                            <el-option :key="form.id" :value="form.id" :label="form.name" hidden/>

                            <el-tree :data="orgInfo" :props="defaultProps" show-checkbox node-key="id" ref="tree"></el-tree>
                        </el-select>

                    </el-form-item>

                    <!--下发类型-->
                    <el-form-item label="通行状态" prop="deviceType">
                        <el-select collapse-tags style="width: 240px !important;" id="" v-model="form.xfType" placeholder="请选择通行状态">
                            <el-option :label="item.label" :value="item.value" v-for="(item,index) in xflx"
                                       :key="item.value"></el-option>
                        </el-select>
                    </el-form-item>

                    <div>
                        <!--通行时间-->
                        <el-form-item label="通行时间" prop="createTime">
                            <el-date-picker
                                    style="width: 240px !important;"
                                    v-model="form.createTime"
                                    type="daterange"
                                    align="right"
                                    format="yyyy-MM-dd"
                                    range-separator="~"
                                    :start-placeholder="this.i18n.t('Start Date')"
                                    :end-placeholder="this.i18n.t('End Date')"
                                    :picker-options="pickerOptions">
                            </el-date-picker>
                        </el-form-item>

                        <el-form-item class="BlankPlaceholder" label=".">
                            <button @click="getJson">get json</button>
                            <!--查询-->
                            <el-button size="small" type="primary" icon="el-icon-search" @click="onSearch">{{this.i18n.t('Query')}}</el-button>
                            <!--重置-->
                            <el-button size="small" type="handle" icon="el-icon-refresh-left" @click="resetSearch">{{this.i18n.t('Reset')}}</el-button>
                        </el-form-item>

                    </div>



                </el-form>
            </div>
        </div>

        <div class="table-container table-box globalDiv">
            <BaseGlobalTable :table_config="table_config" @addTableData="addTableData" @delTableData="delTableData"
                             @handelDetail="handelDetail"
                             @handleEdit="handleEdit" ref="globalTable"></BaseGlobalTable>
        </div>
        <detail ref='detail' :editTableRow='editTableRow' :detailFlag.sync='detailFlag' v-if='detailFlag'></detail>
        <!--<addViewEdit ref='addViewEdit' :dialogType="dialogType" :editTableRow='editTableRow'-->
                     <!--:addViewEditFlag.sync='addViewEditFlag' v-if='addViewEditFlag'></addViewEdit>-->
    </div>
</template>

<script>
    import {deviceTypeList, deviceUpdateType} from '@/assets/common/js/utils/deviceConfig.js'
    import {devicemodelgetlist, getList} from "@/api/jxgl";
    import {deleteDocument} from "../../../api/document";
    //  客户信息管理详情
    import detail from './detail.vue';
    import {getParentsById} from '@/views/rygl/utils.js'

    import {
        getdepartmenttree
    } from "@/api/pcmj/zzxx";

    // 引入新增修改弹框
    // import addViewEdit from './addViewEdit.vue'

    export default {
        name: "sbsj_index",
        components: {
            // addViewEdit,
            detail
        },
        props: {},
        data() {
            return {
                selected:["盛视科技","武汉分公司","深圳总部","海南分公司"],
                props: { multiple: true},
                options: [
                    {
                    value: 1,
                    label: '东南',
                    children: [{
                        value: 2,
                        label: '上海',
                        children: [
                            { value: 3, label: '普陀' },
                            { value: 4, label: '黄埔' },
                            { value: 5, label: '徐汇' }
                        ]
                    }, {
                        value: 7,
                        label: '江苏',
                        children: [
                            { value: 8, label: '南京' },
                            { value: 9, label: '苏州' },
                            { value: 10, label: '无锡' }
                        ]
                    }, {
                        value: 12,
                        label: '浙江',
                        children: [
                            { value: 13, label: '杭州' },
                            { value: 14, label: '宁波' },
                            { value: 15, label: '嘉兴' }
                        ]
                    }]
                }, {
                    value: 17,
                    label: '西北',
                    children: [{
                        value: 18,
                        label: '陕西',
                        children: [
                            { value: 19, label: '西安' },
                            { value: 20, label: '延安' }
                        ]
                    }, {
                        value: 21,
                        label: '新疆维吾尔族自治区',
                        children: [
                            { value: 22, label: '乌鲁木齐' },
                            { value: 23, label: '克拉玛依' }
                        ]
                    }]
                }],
                xflx:[
                    {
                        label:'全部',
                        value:0
                    },
                    {
                        label:'新增',
                        value:1
                    },
                    {
                        label:'修改',
                        value:2
                    },
                    {
                        label:'删除',
                        value:3
                    },

                ],
                xfzt:[
                    {
                        label:'全部',
                        value:0
                    },
                    {
                        label:'下发成功',
                        value:1
                    },
                    {
                        label:'下发失败',
                        value:2
                    }

                ],
                regDate: '',
                dialogType: '',
                value2: '',
                pickerOptions: {
                    shortcuts: [{
                        // 最近一周
                        text: this.i18n.t('Last week'),
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
                            picker.$emit('pick', [start, end]);
                        }
                    }, {
                        // 最近一个月
                        text: this.i18n.t('Last month'),
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
                            picker.$emit('pick', [start, end]);
                        }
                    }, {
                        // 最近三个月
                        text: this.i18n.t('Last three months'),
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
                            picker.$emit('pick', [start, end]);
                        }
                    }]
                },
                devOptions: [],
                orgInfo: [],
                data: [
                    {
                        id: 1,
                        label: "节点1",
                        children: [
                            {
                                id: 11,
                                label: "节点1-1",
                            },
                            {
                                id: 12,
                                label: "节点1-2",
                            },
                        ],
                    },
                    {
                        id: 2,
                        label: "节点2",
                        children: [
                            {
                                id: 21,
                                label: "节点2-1",
                            },
                            {
                                id: 22,
                                label: "节点2-2",
                            },
                        ],
                    },
                ],
                // defaultProps: {
                //     children: "children",
                //     label: "label",
                // },
                defaultProps: {
                    children: 'departmentInfos',
                    label: 'name'
                },
                form: {
                    zzid:[],
                    xfType:null,
                    xfzt:null,
                    deviceType: null,
                    createTime: null,
                    endTime:null,
                    startTime:null
                },
                // 数据分析
                table_config: {
                    table_tbody: [],
                    thead: [
                        // 序号
                        {label: "序号", prop: "@id", type: "index", width: "100"},
                        // 设备类型
                        {label: '人员', prop: "deviceType", type: "", width: "",type: "function", callback: (row) => {
                                return deviceTypeList[row.deviceType].label
                            }},
                        // 设备名称
                        {label: '编号', prop: "deviceNames", type: "", width: ""},
                        // 升级类型
                        {
                            label:'设备', prop: "upgradeType", width: "",type: "function", callback: (row) => {
                                return deviceUpdateType[row.upgradeType].label
                            }
                        },
                        // 版本号
                        {label: '识别方式', prop: "version", type: "", width: ""},
                        // 升级进度
                        {label: '通行状态', prop: "progress", type: "", width: ""},
                        // 创建人
                        {
                            label: '通行时间', prop: "createBy", width: "", type: "function", callback: (row) => {
                                return row.createBy||'-'
                            }
                        },
                        {
                            // 操作
                            label: this.i18n.t('operation'),
                            prop: "operation",
                            // 当前列的类型，不填为直接渲染文本，function 为调用回调函数，operation 为操作按钮，image 为显示图片
                            type: "operation",
                            width: 130,
                            // 按钮的风格，为 true 则显示自定义图标，为 false 显示 按钮样式
                            icon: true,
                            // 图标风格按钮列表
                            iconClass: [

                                {
                                    type: "detail",
                                    class: "icon-eye",
                                    title: this.i18n.t('view'),//查看
                                    callback: "handelDetail",
                                    power: "",
                                },
                            ],
                        },
                    ],
                    tableButtonArr: [
                        {
                            iconClass: "icon-plus-circle",
                            btnType: 2,
                            text: '导出',//导出
                            callback: "addTableData",
                            power: "add",
                        },
                        // {
                        //     iconClass: "icon-trash",
                        //     btnType: 2,
                        //     text: "删除",
                        //     callback: "delTableData",
                        //     power: "export",
                        // },
                    ],
                    // 列表前面是否需要显示 checkbox 框，如要显示 值写成 true
                    checkbox: false,
                    index: true,
                    showPagination: true, // 翻页器
                    // 请求表格数据的 url ，可直接传入
                    url: 'deviceversion/getlist',
                    // 请求表格数据的 方式
                    method: "post",
                    //表格 title 文字
                    tableTitle: false,
                    //是否需要给 th 加 样式boder 如果需要加上addBoderClass 不需要显示空或者不加这个字段配置
                    addBoderClass: "addBoderClass",
                },
                selectRow: [],
                editTableRow: null,
                detailFlag: false,
                addViewEditFlag: false,

            };
        },
        computed: {},
        watch: {},
        mounted() {
            // 获取组织
            this.getdepartmenttree()

            console.log(deviceTypeList);
            this.devOptions = deviceTypeList
            this.$refs.globalTable.loading_data();
        },
        methods: {
            getJson(){
                this.selected=this.$refs.tree.getCheckedKeys()
                console.log(this.$refs.tree.getCheckedKeys());
            },
            handerChange(){

                console.log(this.form.zzid);
            },
            /**
             * @description  获取部门人员树
             * @param :
             **/
            getdepartmenttree() {
                this.$nextTick(async () => {
                    getdepartmenttree({IncludePersonInfo: false}).then((res) => {
                        if (res.code === 200) {
                            // debugger
                            this.orgInfo = res.data.rootDepartments

                            console.log(this.orgInfo);
                        }
                    }).catch(err => {

                    }).finally(() => {

                    })

                });
            },
            resetSearch() {
                this.form.deviceType=null
                this.form.createTime=null
                this.$refs.globalTable.loading_data();
            },
            onSearch() {
                console.log(this.form);
                if(this.form.deviceType==null){
                    this.form.deviceType=null
                }
                if(this.form.createTime){
                    var formatStr="yyyy-MM-dd"
                    this.form.startTime=new Date(this.form.createTime[0]).format(formatStr)+' 00:00:00'
                    this.form.endTime=new Date(this.form.createTime[1]).format(formatStr)+' 23:59:59'
                }else{
                    this.form.createTime=null
                    this.form.startTime=null
                    this.form.endTime=null
                }
                this.$nextTick(() => {
                    this.$refs.globalTable.loading_data(this.form);
                });
                // this.W.$tips('warning', '未实现');
            },

            // 获取表格数据
            getTableData() {
                this.$nextTick(() => {
                    this.$refs.globalTable.loading_data(this.form);
                });
            },

            /**
             * @description  添加表格
             * @param {row}: Object 点击项数据
             **/
            addTableData() {
                if (!this.isElectron){
                    // 请在桌面端操作
                    this.W.$tips("warning", this.i18n.t("Please operate on the desktop!"));
                    return
                }
                this.dialogType = 'add';
                this.editTableRow = null;
                this.addViewEditFlag = true;
            },
            /**
             * @param arr:{data} --当前行数据
             * @return: not
             * 表格查看的回调
             */
            handelDetail(data) {
                console.log(data);
                this.dialogType = 'view';
                this.editTableRow = data;
                this.detailFlag = true;
            },
            // 表格删除回调
            delTableData(row) {
                console.log(row);
                // 确认删除？
                this.W.$myConfirm('warning',  this.i18n.t("Are you sure you want to delete it"))
                    .then(async () => {
                        let res = await deleteDocument({id: row.id});
                        if (res.code == 200) {
                            // 删除成功
                            this.W.$tips("success",  this.i18n.t("Successfully deleted"));
                            this.getTableData();
                        }
                    })
                    .catch(() => {
                    });
            },
            //  表格修改回调
            handleEdit(row) {
                this.dialogType = 'edit';
                this.addViewEditFlag = true;
                this.editTableRow = row;
                console.log('row',this.editTableRow);
            },
        },
    };
</script>

<style scoped lang="scss">
    .right-height {
        height: calc(100% - 36px);
    }

    ::v-deep .content-width .el-form.wrapperform-box .el-form-item {
        width: calc((100% - 100px) / 3);
    }
    ::v-deep #deviceType{
        width: 320px !important;
    }
</style>
